<template>
  <div ref="buLineContainer" class="buLine-container">
    <buLineHeader />
    <!-- 铁塔布线canvas -->
    <div class="overflow-scroll">
      <LineCanvas :config="configStore.config!" :wire-data="wireData" :ziDaoNum="ziDaoNum" />
    </div>
    <!-- <LineSvg
      :config="configStore.config!"
      :line-data="LineData"
      :wire-data="wireData"
      :ziDaoNum="ziDaoNum"
      :xiangNum="xiangNum" /> -->
  </div>
</template>

<script setup lang="ts">
import buLineHeader from '@/components/buLine/header.vue'
import LineCanvas from '@/components/image/LineCanvas/LineCanvas.vue'
import useBetStore from '@/states/useBetStore'
import useCalcBetstore from '@/states/useCalcBetstore'
import useConfigStore from '@/states/useConfigStore'
import useTowerPointStore from '@/states/useTowerPointStore'
import useTowerStore from '@/states/useTowerStore'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const towerStore = useTowerStore()
const betStore = useBetStore()
const calcBetStore = useCalcBetstore()
const towerPointStore = useTowerPointStore()
const buLineContainer = ref<HTMLDivElement>()
const configStore = useConfigStore()

onMounted(() => {
  towerPointStore.all({ id: +route.params.id })
  configStore.getConfig(+route.params.id, buLineContainer.value!)
})

const towerData = ref<TowerDataConfig[]>([
  {
    tName: 'B1',
    altitude: 200,
    tType: '耐张',
    tStyle: '',
    corner: '0°34′',
  },
  {
    tName: 'B2',
    altitude: 220,
    tType: '直线',
    tStyle: '',
  },
  {
    tName: 'B3',
    altitude: 250,
    tType: '直线',
    tStyle: '',
  },
  {
    tName: 'B4',
    altitude: 230,
    tType: '耐张',
    corner: '5°34′',
    tStyle: '',
  },
  {
    tName: 'B5',
    altitude: 230,
    tType: '直线',
    tStyle: '',
  },
  {
    tName: 'B6',
    altitude: 230,
    tType: '耐张',
    corner: '7°34′',
    tStyle: '',
  },
])

towerStore.all({ lineId: +route.params.id })
betStore.all({ lineId: +route.params.id })
calcBetStore.all({ id: +route.params.id })

// const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//   if (rowIndex % 2 === 0) {
//     if (columnIndex === 0) {
//       return [1, 2]
//     }
//   }
// }

const betData = ref<BetDataConfig[]>([
  {
    id: 1,
    btName: 'B1-B2',
    btSpan: 300,
    leftTower: towerData.value[0],
    rightTower: towerData.value[1],
  },
  {
    id: 2,
    btName: 'B2-B3',
    btSpan: 450,
    leftTower: towerData.value[1],
    rightTower: towerData.value[2],
  },
  {
    id: 3,
    btName: 'B3-B4',
    btSpan: 430,
    leftTower: towerData.value[2],
    rightTower: towerData.value[3],
  },
  {
    id: 4,
    btName: 'B4-B5',
    btSpan: 400,
    leftTower: towerData.value[3],
    rightTower: towerData.value[4],
  },
  {
    id: 5,
    btName: 'B5-B6',
    btSpan: 400,
    leftTower: towerData.value[4],
    rightTower: towerData.value[5],
  },
])

// 子导线数量
const ziDaoNum = ref(2)
const xiangNum = ref(3)

const wireData = ref<WrieDataInter[]>([
  {
    id: 1,
    type: 'LGJ-400/50',
    long: 2500,
    show: 2100,
    remain: 400,
    startBetId: 0,
    startBet_left_long: 0,
    startBet_right_long: 300,
    betIds: [1],
    endBetId: 2,
    endBet_left_long: 100,
    endBet_right_long: 330,
    ziWire_id: 0,
    xiang_id: 0,
  },
  {
    id: 2,
    type: 'LGJ-400/50',
    long: 2500,
    show: 2300,
    remain: 200,
    startBetId: 2,
    startBet_left_long: 50,
    startBet_right_long: 330,
    betIds: [3],
    endBetId: 4,
    endBet_left_long: 200,
    endBet_right_long: 100,
    ziWire_id: 0,
    xiang_id: 0,
  },
  {
    id: 3,
    type: 'LGJ-400/50',
    long: 2500,
    show: 2100,
    remain: 400,
    startBetId: 0,
    startBet_left_long: 0,
    startBet_right_long: 300,
    betIds: [1],
    endBetId: 2,
    endBet_left_long: 200,
    endBet_right_long: 230,
    ziWire_id: 1,
    xiang_id: 0,
  },
  {
    id: 4,
    type: 'LGJ-400/50',
    long: 2500,
    show: 2300,
    remain: 200,
    startBetId: 2,
    startBet_left_long: 200,
    startBet_right_long: 230,
    betIds: [3],
    endBetId: 4,
    endBet_left_long: 200,
    endBet_right_long: 100,
    ziWire_id: 1,
    xiang_id: 0,
  },
])
</script>

<style scoped lang="scss">
.buLine-container {
  @apply w-full h-full grid grid-rows-[50px_1fr] overflow-hidden;
}
</style>

<script lang="ts">
export default {
  route: {
    path: '/home/buLine/:id',
    name: 'buLine',
  },
}
</script>
